Purpose

This pull request introduces support for component-specific style overrides in the theme configuration, enabling more granular customization of UI components. The changes include updates to the theme system, new interfaces for component overrides, and modifications to existing components to respect these overrides.

Theme System Enhancements:

• Added support for components in ThemeConfig to define style overrides, default properties, and variants for specific components like Button and Field. ([[1]](https://github.com/asgardeo/javascript/pull/113/files#diff-a1f5614ca9519ec291c8191c45b409f396ab60acdfedc76a3a78387afdd5952cR104-R144), [[2]](https://github.com/asgardeo/javascript/pull/113/files#diff-a1f5614ca9519ec291c8191c45b409f396ab60acdfedc76a3a78387afdd5952cR192-R217))
• Introduced ThemeComponentVars and updated ThemeVars to include component-specific CSS variable references. ([packages/javascript/src/theme/types.tsR336-R339](https://github.com/asgardeo/javascript/pull/113/files#diff-a1f5614ca9519ec291c8191c45b409f396ab60acdfedc76a3a78387afdd5952cR336-R339))
• Updated toCssVariables and toThemeVars functions to generate and apply CSS variables for component overrides. ([[1]](https://github.com/asgardeo/javascript/pull/113/files#diff-b3844e950cb1696bb93462fc5b6e2e28001768d13abaa7922c3900a97ea489f7R452-R488), [[2]](https://github.com/asgardeo/javascript/pull/113/files#diff-b3844e950cb1696bb93462fc5b6e2e28001768d13abaa7922c3900a97ea489f7R592-R595))
• Enhanced transformThemeVariant to extract and map component-specific styles (e.g., borderRadius) into the theme configuration. ([[1]](https://github.com/asgardeo/javascript/pull/113/files#diff-e6ca36501cf434eb255aa7e60b16bc2a9b4de10cc00ede5074fb542e0856c7baL52-R52), [[2]](https://github.com/asgardeo/javascript/pull/113/files#diff-e6ca36501cf434eb255aa7e60b16bc2a9b4de10cc00ede5074fb542e0856c7baL114-L120), [[3]](https://github.com/asgardeo/javascript/pull/113/files#diff-e6ca36501cf434eb255aa7e60b16bc2a9b4de10cc00ede5074fb542e0856c7baR131-R162))

Component Updates:

• Modified Button, DatePicker, OtpField, Select, and TextField styles to use component-specific overrides for borderRadius, falling back to the default theme values if overrides are not provided. ([[1]](https://github.com/asgardeo/javascript/pull/113/files#diff-800ef45a7ab9ed1fdf0bf9e7f68700c429fb52f6a240f53b2cd240de39cef535L56-R58), [[2]](https://github.com/asgardeo/javascript/pull/113/files#diff-308e84f9bd524abee5980e6d17bcd505aedcbed0f8ab57c6a0f24ae0a72affafL37-R37), [[3]](https://github.com/asgardeo/javascript/pull/113/files#diff-2da598feef7df689e3a2bf8303fb67d69ae570d3594e83d3695b99d441c990b4L57-R57), [[4]](https://github.com/asgardeo/javascript/pull/113/files#diff-cfbe8f2a9e57cc0f2130a64edd049377ad65542b8950634f15e4900a7645e191L40-R40), [[5]](https://github.com/asgardeo/javascript/pull/113/files#diff-976ee22094dd6b89f63c0eed7a4a38bfd712c1226ca4bc48c50cf2c76176d26cL57-R57))

Theme Context Integration:

• Updated ThemeProvider to merge component-specific overrides from branding themes and user-provided configurations. ([[1]](https://github.com/asgardeo/javascript/pull/113/files#diff-259c20b7ce08682110d92b5042a6709ff90ba0dcb422c4e861cd3d15fe46eb19R178), [[2]](https://github.com/asgardeo/javascript/pull/113/files#diff-259c20b7ce08682110d92b5042a6709ff90ba0dcb422c4e861cd3d15fe46eb19R206-R209))

Related Issues

• chore: stabilize @asgardeo/react & @asgardeo/nextjs #81

Related PRs

• N/A

Checklist

• e2e cypress tests locally verified.
• Manual test round performed and verified.
• UX/UI review done on the final implementation.
• Documentation provided. (Add links if there are any)
• Unit tests provided. (Add links if there are any)
• Integration tests provided. (Add links if there are any)

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines?
• Ran FindSecurityBugs plugin and verified report?
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets?